<template>
  <a-drawer v-model:visible="visible" title="原料详情" :width="width >= 580 ? 580 : '100%'" :footer="false">
    <a-descriptions :column="2" size="large" class="general-description">
      <a-descriptions-item label="ID">{{ dataDetail?.id }}</a-descriptions-item>
      <a-descriptions-item label="机型ID">{{ dataDetail?.deviceTypeId }}</a-descriptions-item>
      <a-descriptions-item label="原料名称">{{ dataDetail?.materialName }}</a-descriptions-item>
      <a-descriptions-item label="原料编号">{{ dataDetail?.materialCode }}</a-descriptions-item>
      <a-descriptions-item label="原料类型（1：速溶；2：现磨；3：冰；4：杯子；99：其他）">{{ dataDetail?.materialType }}</a-descriptions-item>
      <a-descriptions-item label="原料描述">{{ dataDetail?.description }}</a-descriptions-item>
      <a-descriptions-item label="容量">{{ dataDetail?.qty }}</a-descriptions-item>
      <a-descriptions-item label="计量单位">{{ dataDetail?.qtyUnit }}</a-descriptions-item>
      <a-descriptions-item label="预警数量">{{ dataDetail?.warnQty }}</a-descriptions-item>
      <a-descriptions-item label="消耗速率">{{ dataDetail?.consumeRate }}</a-descriptions-item>
      <a-descriptions-item label="库存校验（1：启用；2：禁用）">{{ dataDetail?.inventoryCheck }}</a-descriptions-item>
      <a-descriptions-item label="库存消耗（1：启用；2：禁用）">{{ dataDetail?.inventoryConsume }}</a-descriptions-item>
      <a-descriptions-item label="状态（1：启用；2：禁用）">{{ dataDetail?.status }}</a-descriptions-item>
      <a-descriptions-item label="创建人">{{ dataDetail?.createUser }}</a-descriptions-item>
      <a-descriptions-item label="创建人">{{ dataDetail?.createUserString }}</a-descriptions-item>
      <a-descriptions-item label="创建时间">{{ dataDetail?.createTime }}</a-descriptions-item>
      <a-descriptions-item label="修改人">{{ dataDetail?.updateUser }}</a-descriptions-item>
      <a-descriptions-item label="修改人">{{ dataDetail?.updateUserString }}</a-descriptions-item>
      <a-descriptions-item label="修改时间">{{ dataDetail?.updateTime }}</a-descriptions-item>
    </a-descriptions>
  </a-drawer>
</template>

<script lang="ts" setup>
import { useWindowSize } from '@vueuse/core'
import { type MaterialDetailResp, getMaterial } from '@/apis/vending/matreial'

const { width } = useWindowSize()

const visible = ref(false)
const dataId = ref('')
const dataDetail = ref<MaterialDetailResp>()
// 查询详情
const getDataDetail = async () => {
  const res = await getMaterial(dataId.value)
  dataDetail.value = res.data
}

// 打开详情
const onDetail = async (id: string) => {
  dataId.value = id
  await getDataDetail()
  visible.value = true
}

defineExpose({ onDetail })
</script>

<style lang="scss" scoped></style>
